<!--面包屑导航栏-->
<script setup>
import {toRefs} from "vue";
import {useStore} from "vuex";
import ForumLink from "@/components/common/link/ForumLink.vue";
import ReadLink from "@/components/common/link/ReadLink.vue";
import {setupMapState} from "@/assets/js/vuexUtils";
import {getForumRoute} from "@/assets/js/routerUtils";
import {ArrowRightBold} from "@element-plus/icons-vue";

const props = defineProps({
  // 回复响应
  data: {type: Object},
})

const {currentFavorForum} = setupMapState("Account", ["currentFavorForum"])

const store = useStore();
const {data} = toRefs(props)
const getRoute = (forum) => {
  const {type, forumId, colTid} = forum
  return getForumRoute(type === '合集', forumId, colTid)
}
</script>

<template>
  <el-breadcrumb v-if="data" :separator-icon="ArrowRightBold" class="breadcrumb">
    <!--版面链接-->
    <el-breadcrumb-item v-if="data.forum && data.forum.forumId">
      <el-dropdown v-if="currentFavorForum" type="primary" @command="$router.push(getRoute($event))">
        <forum-link :forum-id="data.forum.forumId">
          <span class="breadcrumb-text">{{ data.forum.forumName }}</span>
        </forum-link>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="forum in currentFavorForum.filter(i=>i.type==='版面')" :command="forum">
              {{ forum.name }}
            </el-dropdown-item>
            <el-dropdown-item v-for="(forum,index) in currentFavorForum.filter(i=>i.type==='合集')" :command="forum" :divided="index===0">
              {{ forum.name }} (合集)
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-breadcrumb-item>
    <!--合集链接-->
    <el-breadcrumb-item v-if="data.forum && data.forum.colTid">
      <forum-link :col-tid="data.forum.colTid">
        <span class="breadcrumb-text">{{ data.forum.colTitle }}</span>
      </forum-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item v-else-if="data.topicInfo && data.topicInfo.colTopic">
      <forum-link :col-tid="data.topicInfo.colTopic.topicId">
        <span class="breadcrumb-text">{{ data.topicInfo.colTopic.title }}</span>
      </forum-link>
    </el-breadcrumb-item>
    <!--主题链接-->
    <el-breadcrumb-item v-if="data.topicInfo">
      <read-link :tid="data.topicInfo.topicId">
        <span class="breadcrumb-text">{{ data.topicInfo.title }}</span>
      </read-link>
    </el-breadcrumb-item>

  </el-breadcrumb>
</template>

<style scoped>
.breadcrumb {
  margin-top: 5px;
  margin-bottom: 5px;
}

.breadcrumb-text {
  font-size: 140%;
}
</style>